<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--    TODO 更新了新的版本号 依然没有解决axios.post不是方法的问题 等到 10.8 再做调试 -->

  <script src="dependency/js/axios.js"></script>
  <script src="dependency/js/vue2.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
<!--  <script src="dependency/element-ui/lib/index.js"></script>-->
<!--  <link rel="stylesheet" href="dependency/element-ui/lib/theme-chalk/index.css">-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    width: 50%;
    margin:  auto;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

</style>
<body>

<div id="app">

  <el-container>
    <el-header style="text-align: center;font-family: Helvetica Neue , Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;font-size: large;color: #409EFF">欢迎注册电动车管理系统</el-header>
    <el-main >
      <el-form  :model="userData" :rules="rule" ref="userData"  align="center" label-width="50px">
        <el-form-item label="账号:" prop="username" >
          <el-input  prefix-icon="el-icon-user" v-model="userData.username"  style="width: 60%">
          </el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input type="password" prefix-icon="el-icon-lock" v-model="userData.password" style="width: 60%" show-password >
          </el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="telephone">
          <el-input  prefix-icon="el-icon-phone-outline" v-model="userData.telephone"  style="width: 60%" >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goLogin">去登录</el-button>
          <el-button type="success" @click="userRegister('userData')">注册</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</div>
<script>
  new Vue({
    el:"#app",
    data(){
      var checkTelephone = (rule, value, cb) => {
        if (value===null){
          cb(new Error("请输入手机号"));

        }
        // 验证手机号的正则表达式
        const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
        if (regMobile.test(value)) {
          cb();
        }
        cb(new Error("请输入合法的手机号"));

      };
      var checkUserName= (rule,value,cb)=>{
        var pattern = /[1-9]([0-9]{5,11})/;
        if (value===null){
          cb(new Error("请输入账号"));
        }
        if (pattern.test(value)) {
          cb();
        }
        cb(new Error("账号应该为6-11位 以1-9开头的纯数字"));
      };
      var checkPassword = (rule, value, cb) =>{
        var checkPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
        if (value===null){
          cb(new Error("请输入账号"));

        }
        if (checkPassword.test(value)) {
          cb();
        }
        cb(new Error("密码应该为6-12位的字母和数字组合"));
      };
      return{
        userData:{
          username:"",
          password:"",
          telephone:""
        },
        identity:'',
        rule: {
          telephone: [
            { validator: checkTelephone,trigger: 'blur' }
          ],
          username: [
            {
              validator: checkUserName,trigger: 'blur'
            },

          ],
          password: [
            {
              valitdator:checkPassword, trigger:'blur'
            }
          ]

        },
      };
    },
    methods: {
      goLogin(){
        window.location.href="login.html";
      },
      userRegister(formName){
        this.$refs[formName].validate((valid) => {
          console.log(valid);
          if (valid===true) {
            var _this = this;
            axios.post("/user/save",_this.userData).then(function (resp){
              if(resp.data.code!==0){
                window.location.href="login.html";
              }
              else {
                _this.$message.error(resp.data.msg);
              }
            });
          } else {
            this.$message.error("你以为乱输我就让你交?");
            return false;
          }
        });

      }
    }
  })
</script>
</body>
</html>